<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频网页</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index_1.css">
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .video-container {

      margin: 0 auto;
      margin-top: 10px;
      width: 80%;
      max-width: 800px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      flex-direction: column;
    }

    .box {
      position: relative;
    }

    video {
      width: 100%;
    }
    .comment {
      display: flex;
      margin: 20px 0;
    }
    .comment button {
      margin-left: auto;
    }

    .clickNum,
    .praiseNum {
      text-align: center;
    }

    .clickNum h3,
    .praiseNum h3 {
      margin: 0;
      color: #333;
    }

    .cNum ,
    .pNum {
      line-height: 15px;
      margin: 5px 10px;
      font-size: 16px;
      color: #666;

    }
    .comment h3{
      padding-top: 9px;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color: #3498db;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s, opacity 0.3s;
    }

    button:hover {
      background-color: #2980b9;
    }

    button:active {
      background-color: #2980b9;
      opacity: 0.5;
    }

    #comment-text {
      width: 100%;
      height: 50px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      overflow-y: auto;
      resize: none;
    }

    #comment-text:focus {
      border: 1px solid #007bff;
    }

    .commentTxt {
      width: 100%;
      margin-top: 20px;
    }
    .user-comment{
      margin-top: 20px;
      padding: 10px;
      background-color: white;
      border-radius: 10px;
    }
    .a-comment{
      max-height: 100px;
      border-radius: 10px;
      padding: 7px;
      background-color: rgb(232, 232, 232);
      display: flex;
      overflow: hidden;
      transition: max-height 0.3s;
      /* align-items: center; */

    }
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .user-comment h2 {
      margin: 0 0 10px 0 ;
    }
    .user-comment li{
      margin: 0 0 10px 0 ;
    }
    .a-comment img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .a-comment p {
      margin-top: 10px;
      font-size: 14px;
      color: #333;
    }
    .a-comment .ii{
      line-height: 40px;
    }
    .write-a-reply-container {
      margin-left: auto;
    }
    .write-a-reply-container p{
      font-size: 12px;
      color: #666;
      line-height: 20px;
    }
    .reply-container {
      margin-left: 50px;
    }
    .reply {
      display: flex;
      background-color: rgb(255, 255, 227);
      border-radius: 50px;
    }
    .reply img {
      width: 30px;
      height: 30px;
      margin-top: 4.5px;
      border-radius: 30px;
    }
    .reply .ii {
      line-height: 40px;
    }
    .reply p {
      margin: 0;
      font-size: 13px;
      line-height: 40px;
    }
    .reply-container li {
      margin-top: 10px;
    }
    .comment-time p {
      margin: 0;
      margin-top: 2px;
      margin-left: 50px;
      font-size: 10px;
      color: #666;
    }
    .video-container .title {
      font-size: 25px;
    }
</style>
</head>
<body>
  <!-- 头部区域 -->
<div class="header">
  <div class="wrapper">
      <!-- logo -->
      <div class="logo">
          <a href="home.html"></a>
      </div>
      <!-- 导航 -->
      <div class="nav">
          <ul>
              <li>
                  <a href="home.html">首页</a>
              </li>
              <li>
                  <a href="musictype.html">分类查询</a>
              </li>
          </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">
          <input type="text" placeholder="请输入关键字">
          <a href="#"></a>
      </div>
      <!-- 用户 -->
      <div class="user">
          <a href="#">
              <img src="./uploads/user.png" alt="#">
              <span>卖报的小行家</span>
          </a>
      </div>
  </div>
</div>
<div class="video-container">
    <div class="title"></div>
    <div class="box">
      <video id="video" src=""></video><br>
    </div>
    <div class="comment">
        <h3>播放量:</h3><h3><div class="cNum"></div></h3>
        <h3>点赞量:</h3><h3><div class="pNum"></div></h3>
        <button type="button">点赞</button>
    </div>
    <div class="commentTxt">
      <form id="comment-form">
        <textarea id="comment-text" placeholder="在这里输入您的评论"></textarea>
        <button type="submit">提交评论</button>
      </form>
    </div>
    <div class="user-comment">
      <h2>评论</h2>
      <ul>
        <li>
          <div class="a-comment">
            <img src="uploads/user.png" alt="">
            <div class="ii">：</div>
            <p>这是一个评萨达范多个是艾师傅是阿斯顿发发抖价</p>
          </div>
        </li>
        <li>
          <div class="a-comment">
          </div>
        </li>
      </ul>
    </div>
</div>
<div class="footer">
  <div class="wrapper">
      <div class="left">
          <a href="#">
              <img src="../images/log.png" alt="">
          </a>
          <p>
              这是一个练习型的网站，就是分享作者的一些音乐分享。
              音乐肯定是不全的，后续可以继续加内容。
              如果有什么建议，可以点击下面按钮，给我留言。
              若有违规音乐，请给我留言，届时下架。
          </p>
          <a href="message.html" class="give-me-advise">给我留言</a>
      </div>
      <div class="right">
          <dl>
              <dt>合作伙伴</dt>
              <dd><a href="#">就我一个</a></dd>
              <dd><a href="#">就我一个</a></dd>
          </dl>
      </div>
  </div>
</div>
<script src="../js/axios.min.js"></script>
<script>
  //传递数据
  const urlParams = new URLSearchParams(window.location.search);
  const queryString = urlParams.toString();
  const originData = {};
  urlParams.forEach((value, key) => {
    originData[key] = value;
  });
  console.log(originData);
  const name = originData.name
  const album = originData.album
  //视频数据展示
  axios({
    url:`http://localhost:8080/song/detail?name=${name}&album=${album}`,
    method:"get"
  }).then(result => {
    const data = result.data.data
    const videoContainer = document.querySelector(".video-container")

    //标题
    const title = document.querySelector(".title")
    title.textContent = data.name
    
    //播放量
    const cNum = document.querySelector(".cNum")
    cNum.textContent = data.clickNum

    //点赞数
    const pNum = document.querySelector(".pNum")
    pNum.textContent = data.praiseNum


    const video = document.querySelector("video")
    video.src = data.mv;
    video.controls = true;
    video.autoplay = false; // 可选，是否自动播放

    //点赞机构
    const praise = document.querySelector("button");
    praise.addEventListener('click', function() {
    this.disabled = true;
    this.textContent = '已点赞';

    const id= data.id

    axios({
      url: `http://localhost:8080/video/praiseChange/${id}`,
      method: 'put',
      }).then(result => {
        const pNum = document.querySelector(".pNum");
        pNum.textContent = result.data.data.praiseNum;
        data.praiseNum = result.data.data.praiseNum;
      }).catch(error => {
        console.error(error);
        // 如果请求失败，可以在这里考虑取消禁用按钮的操作
        this.disabled = false;
        this.textContent = '点赞';
      });
    });
  }).catch(error => {
    console.error(error);
  });

  //评论
  showComment(name,album)

  //提交评论
  document.getElementById('comment-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    let comment = document.getElementById('comment-text').value;
    console.log("评论：",comment);
    axios({
        url:`http://localhost:8080/reply/username/${localStorage.getItem("username")}`,
      }).then(result=>{
        console.log(result.data.data);
        const data = {
          "name":name,
          "album":album,
          "comment":comment,
          "userId":result.data.data
        }
        axios({
          url:`http://localhost:8080/comment/add`,
          method:"post",
          data:data,
        }).then(result=>{
          showComment(name,album)
        })
        // 清空评论框
        document.getElementById('comment-text').value = '';
      })
  });


//展示评论
function showComment(name,album) {
  const ulComment = document.querySelector(".user-comment ul")
  ulComment.innerHTML = '' 
  axios({
    url:`http://localhost:8080/comment?name=${name}&album=${album}`,
    method:"get",
  }).then(result=>{
    const data = result.data.data
    //用userid找到头像图片
    data.forEach(comment =>{
      const liComment = document.createElement('li');
      axios({
        url:`http://localhost:8080/comment/userId/${comment.userId}`,
        method:"get"
      }).then(result => {
        const userImage = result.data.data
        liComment.innerHTML = `
          <div class="a-comment" >
            <img src="${userImage}" alt="">
            <div class="ii">：</div>
            <p>${comment.comment}</p>
            <div class="write-a-reply-container">
              <p class="write-a-reply" onclick="showForm('${comment.id}','${comment.name}')" style="cursor: pointer;">回复</p>
            </div>
          </div>
          <div class="comment-time">
            <p>${comment.uploadTime}</p>
          </div>
          <div class="write-comment">
            <form id="reply-form-${comment.id}" style="display:none">
              <textarea id="reply-text-${comment.id}" placeholder="在这里输入您的回复"></textarea>
              <button type="submit">提交回复</button>
            </form>
          </div>
          `
      })
      const replyContainer = document.createElement('div');
      replyContainer.className = 'reply-container';
      const ul = document.createElement('ul');

      //获取回复
      axios({
        url:`http://localhost:8080/reply?name=${comment.name}&commentId=${comment.id}`,
        method:"get"
      }).then(result=> {
        const reply = result.data.data
        reply.forEach((r)=>{
          console.log(r);
          //userid获得图片
          axios({
            url:`http://localhost:8080/reply/userId/${r.userId}`
          }).then(result=>{
            console.log(result.data.data);
            const image2 = result.data.data
            const li = document.createElement('li')
            li.innerHTML = `
            <div class="reply">
              <img src="${image2}" alt="">
              <div class="ii">：</div>
              <p>${r.reply}</p>
            </div>
            <div class="comment-time">
              <p>${r.uploadTime}</p>
            </div>
            `
            ul.appendChild(li)
          })
        })
        replyContainer.appendChild(ul);
        liComment.appendChild(replyContainer)
      }) 
    ulComment.appendChild(liComment)
    ulComment.appendChild(document.createElement("hr"))})
  })
}


// 提交回复
function showForm(id,name) {
  document.getElementById(`reply-form-${id}`).style.display = "block";
  document.addEventListener('click', function(event) {
    const target = event.target;
    if (!target.matches('.write-a-reply') && !target.closest('.write-comment')) {
      // 如果点击的不是回复按钮或回复表单本身，则隐藏所有回复表单
      const replyForms = document.querySelectorAll('[id^="reply-form-"]');
      replyForms.forEach(form => {
        form.style.display = 'none';
      });
    }
  });

  document.getElementById(`reply-form-${id}`).addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止默认提交行为
      let reply = document.getElementById(`reply-text-${id}`).value;
      const storedUsername = localStorage.getItem('username');
      axios({
        url:`http://localhost:8080/reply/username/${localStorage.getItem("username")}`,
      }).then(result=>{
        console.log(result.data.data);
        const data = {
          "name":name,
          "commentId":id,
          "reply":reply,
          "userId":result.data.data
        }
        console.log("回复：", reply);
        axios({
          url:`http://localhost:8080/reply`,
          method:"post",
          data:data
        }).then(result=> {
          const data = result.data.data
          document.getElementById(`reply-form-${id}`).style.display = "none";
          showComment(name,album)
        })
      }) 
    })
}

// 从 localStorage 中获取存储的数据
const storedUsername = localStorage.getItem('username');
const storedImage = localStorage.getItem('imageFile'); // 假设这里是存储的图片 base64 编码数据

// 更新 <img> 元素
const imgElement = document.querySelector('.user img');
imgElement.src = storedImage; // 设置图片的 src 属性

// 更新 <span> 元素
const spanElement = document.querySelector('.user span');
spanElement.textContent = storedUsername; // 设置 span 元素的文本内容
  
</script>

</body>
</html>